<template>
	<view class="box">
		<!-- 订单头部 -->
		<view>
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar title="出租车订单" :autoBack="true" placeholder>
			</u-navbar>
		</view>
		<!-- 订单内容 -->
		<view v-for="(i,index) in OrderArr" :key="index">
			<!-- 遮罩层 -->
			<u-overlay :show="show" :opacity="0.7" v-for="g in Real_timeOrder" :key="g.id">
				<view class="Close">
					<u-icon name="close" color="white" size="28" @click="shows" ></u-icon>
				</view>
				
				<view class="Real_time">
					<h3>实时</h3>
					<h2><span>{{g.creationtime}}</span></h2>
					<p>乘客<text style="margin-left: 10px;">{{i.num}}人</text></p>
				</view>
				<view class="destination" style="margin-top: 5%;">
						<view class="round2">
							<u-badge :isDot="true" type="success" bgColor="green"></u-badge>
						</view>
					<p>{{g.origin}}</p>
				</view>
				<view class="destination" style="margin-top: 5%;">
					<view class="round2">
						<u-badge :isDot="true" type="success" bgColor="orange"></u-badge>
					</view>
					<p>{{g.bourn}}</p>
				</view>
				<view class="but">
					<button @click="DetOrder">接单</button>
				</view>
			</u-overlay>
			<!-- 订单信息 -->
			<view class="contentbox" @click="showOrder(i)">
				<p>{{i.creationtime}}
					<span>1+1</span>
				</p>
				<view class="begin">
					<view class="round">
						<u-badge :isDot="true" type="success" bgColor="orange"></u-badge>
					</view>
					<b>{{i.origin}}</b>
				</view>
				<view class="destination">
					<view class="round">
						<u-badge :isDot="true" type="success" bgColor="black"></u-badge>
					</view>
					<b>{{i.bourn}}</b><br>
				</view>
				<view class='destination_span'>
					<view class="contentbox_data">
						<view class="contentbox_num"><u-tag :text='i.num + "人"' type="warning" plain plainFill></u-tag></view>
						<h2>￥{{i.price}}</h2>
					</view>
				</view>
			</view>
		</view>
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				show: false, //控制遮罩层显示
				// 订单信息
				OrderArr: [],
				Real_timeOrder: [], //接单列表
				points:{},  // 司机定位信息
				driverSocketID:'', // 司机的socketID
			}
		},
		onLoad() {
			
			// this.getLocation()
			
			this.socket.emit('login', '司机')
			
			this.points = {
				longitude: 118.177301,
				latitude: 24.504658
			}
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			showOrder(item) { //显示遮罩层
				console.log(this.OrderArr,93);
				console.log(item);
				this.show = !this.show
				this.Real_timeOrder = []
				this.Real_timeOrder.push(item)
				
			},
			shows() { // 关闭遮罩层i
				this.show = !this.show
			},
			// 获取当前位置的经纬度
			// getLocation() {
			// 	let that = this
			// 	uni.getLocation({
			// 		type: 'gcj02',
			// 		geocode: true,
			// 		success: function(res) {
			// 			// 司机定位
			// 			that.points = {
			// 				longitude: 118.177301,
			// 				latitude: 24.504658
			// 			}
			// 		},
			// 		fail(err) {
			// 			console.log(err, '报错了')
			// 		}
			// 	})
			// },
			// 接收信息
			getInfo() {
				// 连接socket---登记身份
				this.socket.on('relogin', message => {
					// 收到服务器消息
					console.log('收到服务器消息：', message)
					// 司机身份
					this.driverSocketID = message.name
					uni.setStorageSync('driverName',this.driverSocketID)
				})
				// 接收用户订单     司机广播订单
				this.socket.on('usercallCar', (callInfo) => {
					// console.log(callInfo, '订单信息')
					// 用户取消订单
					if (callInfo.cancelOrder) {
						const index = this.OrderArr.findIndex(item => item.socketID == callInfo.socketID)
						this.OrderArr.splice(index, 1)
					} else {
						if (this.OrderArr.length >= 1) {
							// 找出已被司机接单的信息
							const index = this.OrderArr.findIndex(item => item.socketID == callInfo.socketID && item.state == 1)
							if (index >= 0) {
								this.OrderArr.splice(index, 1)
							} else {
								// 添加 出租车订单信息
								if (callInfo.carType == 28) {
									if (JSON.stringify(this.OrderArr).includes(JSON.stringify(callInfo)) == false) {
										this.OrderArr.push(callInfo)
									} else {
										// console.log('不添加')
									}
								} else {
									// console.log('不属于出租车订单')
								}
							}
						} else {
							// 首次---添加--出租车订单信息
							if (callInfo.carType == 28) {
								this.OrderArr.push(callInfo)
								
							} else {
								// console.log('不属于出租车订单')
							}
						}
					}
				})
			},
			// 司机---点击接单
				
			async DetOrder() {
				// 发送socket---通知用户
				console.log(this.points,173);
				let orderInfo = this.Real_timeOrder[0] //点击点单详细
				orderInfo.name = this.driverSocketID // 订单添加---接单司机id
				orderInfo.points = this.points // 订单添加---司机出发地经纬度
				orderInfo.state = 1 //改变订单状态  1----接单, 0---未接单
				console.log(orderInfo);
				// 改变订单，数据库添加接单时间
				uni.request({
					url:'http://localhost:8000/driverOrder',
					method:'POST',
					data:{
						'orderInfo':orderInfo
					},
					success:(resp)=> {
						console.log(resp,186);
						if (resp.data.code == 200){
							uni.setStorageSync('orderInfo',orderInfo)
							// 发送订单信息-->用户
							this.socket.emit('send_msg', orderInfo)
												
							// 告知其他司机，次订单已经接收
							this.socket.emit('callCar', orderInfo)
												
							// 提示司机
							uni.showToast({
								title: '接单成功',
								duration: 2000,
							})
							// 同步提示跳转
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/placeofArrival/placeofArrival'
								})
							}, 2000)
						}else{
							uni.$showMsg('接单失败', 'error')
						}
						
					}
				})
			},
		},
		
	}
</script>

<style lang="scss">
	
	.box {
		background-color: #F0F2F5;
		width: 100%;
		height: 100%;
		position: absolute;
	}
	
	.contentbox {
		width: 90%;
		height: 150px;
		background-color: white;
		border-radius: 20px;
		margin: 0 auto;
		margin-top: 5%;
	
	}
	
	.contentbox>p>span {
		height: 10px;
		width: 20px;
		background-color: #5E6976;
		color: white;
		font-weight: 700;
		border-radius: 5px;
		font-size: 12px;
		padding: 2px;
		margin-left: 5px;
	}
	
	.contentbox>p {
		font-weight: 700;
		padding-top: 5%;
		padding-left: 5%;
		font-size: 20px;
	}
	.contentbox_data{
		display: flex;
		margin-top: 15px;
		.contentbox_num{
			padding-left: 20px;
		}
	}
	.begin {
		display: flex;
	}
	.begin b {
		margin-left: 5%;
		font-size: 14px;
		color: #959EA9;
	}
	
	.destination {
		display: flex;
	}
	
	.destination b {
		margin-left: 5%;
		font-size: 14px;
		color: #959EA9;
	}
	
	.destination_span span {
		font-size: 14px;
		color: #959EA9;
		margin-left: 7%;
	}
	
	.destination_span h2 {
		position: absolute;
		right: 10%;
		font-size: 24px;
	}
	
	.Close {
		position: absolute;
		right: 5%;
		top: 10%;
	}
	
	.Real_time {
		width: 50%;
		margin: 0 auto;
		margin-top: 40%;
	}
	
	.Real_time h3 {
		color: white;
		text-align: center;
	}
	
	.Real_time h2 {
		color: white;
		text-align: center;
		font-weight: 400;
	}
	.Real_time span {
		color: white;
		text-align: center;
		font-size: 30px;
		font-weight: 900;
	}
	
	.Real_time p {
		color: #90909A;
		text-align: center;
	}
	
	.destination p {
		color: #DADCE8;
		font-size: 24px;
		margin-left: 10px;
	}
	.but {
		position: absolute;
		bottom: 0;
		width: 100%;
	}
	
	.but>button {
		background-color: orange;
		color: white;
		height: 60px;
		line-height: 60px;
		font-size: 20px;
	}
	.round{
		margin-top: 5px;
		margin-left: 5%;
	}
	.round2{
		margin-top: 12px;
		margin-left: 10%;
	}
</style>
